<template>
  <div class="login-page">
    <!-- 背景图容器 -->
    <div class="login-bg"></div>
    
    <!-- 登录表单容器（偏右布局） -->
    <div class="login-form-container">
      <el-card class="login-card">
        <!-- 标题 -->
        <div class="login-title">焊接学习平台学生端</div>
        
        <!-- 登录表单 -->
        <el-form 
          ref="loginForm" 
          :model="loginForm" 
          :rules="loginRules" 
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username" 
              placeholder="请输入账号" 
              prefix-icon="el-icon-user"
              clearable
            ></el-input>
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password" 
              type="password" 
              placeholder="请输入密码" 
              prefix-icon="el-icon-lock"
              clearable
              show-password
              @keyup.enter.native="handleLogin"
            ></el-input>
          </el-form-item>
          
          <!-- 长登录按钮（占满容器宽度） -->
          <el-form-item>
            <el-button 
              type="primary" 
              class="login-btn" 
              @click="handleLogin"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '账号长度在 3-20 个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少 6 位', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            const res = await this.$api.auth.login({
              username: this.loginForm.username,
              password: this.loginForm.password
            })
            
            
            // 响应拦截器已返回data,所以res直接是 { user, token }
            localStorage.setItem('student_token', res.token)
            
            this.$message.success('登录成功')
            this.$router.push('/')
          } catch (error) {
            this.$message.error(error.message || '登录失败，请检查账号密码')
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 背景图样式 */
.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 替换为你的背景图地址（建议使用阿里云/七牛云等图床，或放在src/assets目录） */
  background: url('@/assets/denglu.jpg') 
              no-repeat center center;
  background-size: cover;  /* 背景图自适应全屏 */
  filter: brightness(0.8); /* 适当降低亮度，避免影响表单可读性 */
  z-index: 1;
}

/* 登录表单容器（偏右布局） */
.login-form-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px; /* 增大最大宽度（原400px） */
  padding: 0 30px;
  z-index: 2;
}

/* 登录卡片样式 */
.login-card {
  width: 100%;
  padding: 40px 50px; /* 增大内边距（原30px 40px） */
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px; /* 增大圆角 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 增强阴影 */
  border: none; /* 去掉默认边框 */
}

/* 标题样式 */
.login-title {
  text-align: center;
  font-size: 28px; /* 增大标题（原24px） */
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 40px; /* 增加标题下方间距 */
  letter-spacing: 1.5px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0; /* 增加标题下划线 */
}

/* 表单样式 */
.login-form {
  width: 100%;
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 25px;
}

/* 长登录按钮（占满宽度） */
.login-btn {
  width: 100%;
  height: 50px; /* 增大按钮高度（原45px） */
  font-size: 18px; /* 增大按钮文字 */
  letter-spacing: 3px;
  border-radius: 6px; /* 按钮圆角 */
  padding: 0; /* 去除默认内边距 */
}

.login-page >>> .el-input__inner {
  height: 50px; /* 增大输入框高度（原默认） */
  font-size: 16px; /* 增大输入文字 */
  border-radius: 6px; /* 输入框圆角 */
  padding-left: 45px; /* 为图标留出空间 */
  padding-right: 15px;
}

/* 图标容器样式调整 */
.login-page >>> .el-input__prefix {
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 100%;
}

/* 图标大小调整 */
.login-page >>> .el-input__prefix .el-input__icon {
  font-size: 18px; /* 增大前缀图标 */
  line-height: 50px;
}

/* 后缀图标容器(密码显示/清除按钮) */
.login-page >>> .el-input__suffix {
  display: flex;
  align-items: center;
  height: 100%;
}

.login-page >>> .el-input__suffix .el-input__icon {
  line-height: 50px;
}

/* 适配小屏幕（当屏幕宽度<768px时，表单居中显示） */
@media (max-width: 768px) {
  .login-form-container {
    width: 100%;
    right: auto;
    background-color: rgba(255, 255, 255, 0.9);
  }
}
</style>
